<template>
  <div class="MarketActivityAdd-container">
    <el-form :model="activityAddForm" label-width="100px" ref="activityAddFormRef" :rules="rules">
      <el-form-item label="负责人" prop="ownerId">
        <el-select v-model="activityAddForm.ownerId" placeholder="请选择负责人名称" clearable>
          <el-option
            v-for="owner in ownerList"
            :key="owner.id"
            :label="owner.name"
            :value="owner.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="activityAddForm.name" placeholder="请输入活动名称" clearable />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="activityAddForm.startTime"
          type="datetime"
          placeholder="请选择活动开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="activityAddForm.endTime"
          type="datetime"
          placeholder="请选择活动结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </el-form-item>
      <el-form-item label="活动预算" prop="cost">
        <el-input v-model="activityAddForm.cost" placeholder="请输入活动预算" clearable />
      </el-form-item>
      <el-form-item label="活动描述">
        <el-input
          type="textarea"
          v-model="activityAddForm.description"
          placeholder="请输入活动名称"
          :autosize="{ minRows: 2, maxRows: 4 }"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addActivity(activityAddFormRef)">{{
          id ? '修 改' : '新 增'
        }}</el-button>
        <el-button type="primary" @click="goBack" plain>返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="MarketActivityAdd">
import httpRequest from '@/http/httpRequest'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
const router = useRouter()
const route = useRoute()
interface IActivityAdd {
  id: number | null
  ownerId: number | null
  name: string | null
  startTime: string | null
  endTime: string | null
  cost: number | null
  description: string | null
}
let activityAddForm = reactive<IActivityAdd>({
  id: null,
  ownerId: null,
  name: '',
  startTime: '',
  endTime: '',
  cost: null,
  description: '',
})
const goBack = () => {
  router.go(-1)
}
interface IOwnerList {
  id: number | null
  name: string | null
}

let ownerList = ref<IOwnerList[]>([])
const getOwnerList = () => {
  httpRequest
    .doGet('/api/ownerList', {})
    .then((res) => {
      if (res.data.code == 200) {
        ownerList.value = res.data.data || []
      }
    })
    .catch((error) => {})
}

let { id } = route.params

const getActivityDetail = () => {
  httpRequest
    .doGet('/api/activity/' + id, {})
    .then((res) => {
      if (res.data.code == 200) {
        Object.assign(activityAddForm, res.data.data)
      }
    })
    .catch((error) => {})
}
onMounted(() => {
  getOwnerList()
  if (id) {
    getActivityDetail()
  }
})

const activityAddFormRef = ref<FormInstance>()
const rules = reactive<FormRules<IActivityAdd>>({
  ownerId: [{ required: true, message: '请选择活动负责人', trigger: 'blur' }],
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  startTime: [{ required: true, message: '请选择活动开始时间', trigger: 'blur' }],
  endTime: [{ required: true, message: '请选择活动结束时间', trigger: 'blur' }],
  cost: [{ required: true, message: '请输入活动预算', trigger: 'blur' }],
})

const addActivity = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let formData = new FormData()
      formData.append('ownerId', activityAddForm.ownerId + '')
      formData.append('name', activityAddForm.name || '')
      formData.append('startTime', activityAddForm.startTime || '')
      formData.append('endTime', activityAddForm.endTime || '')
      formData.append('cost', activityAddForm.cost + '')
      formData.append('description', activityAddForm.description + '')
      if (activityAddForm.id) {
        //修改活动
        formData.append('id', activityAddForm.id + '')
        httpRequest
          .doPut('/api/activity', formData)
          .then((res) => {
            if (res.data.code == 200) {
              //修改成功
              router.go(-1)
            }
          })
          .catch((error) => {})
      } else {
        //新增活动
        httpRequest
          .doPost('/api/activity', formData)
          .then((res) => {
            if (res.data.code == 200) {
              //新增成功
              router.go(-1)
            }
          })
          .catch((error) => {})
      }
    }
  })
}
</script>

<style scoped lang="scss">
.MarketActivityAdd-container {
  min-height: 100%;
}
</style>
